<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>捕获</title>

		<style>
			div,
			p,
			span {
				width: 400px;
				height: 100px;
				padding: 20px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<!-- 捕获：事件从 Window 向下走近元素，事件到达目标元素。事件从元素又开始冒泡向上出发。 -->

		<div>
			DIV1
			<p>
				P
				<span>SPAN</span>
			</p>
		</div>

		<script>
			let all = document.querySelectorAll('*')

			for (const element of all) {
				element.addEventListener(
					'click',
					function (e) {
						alert(this.tagName)
					},
					true
				)
			}
		</script>
	</body>
</html>
